<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${contextPath}/css/bootstrap.min.css">
<script src="${contextPath}/js/tools.js"></script>
<link type="text/css"
	href="${contextPath}/datetimer/css/jquery-ui-1.8.17.custom.css"
	rel="stylesheet" />
<link type="text/css"
	href="${contextPath}/datetimer/css/jquery-ui-timepicker-addon.css"
	rel="stylesheet" />
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript"
	src="${contextPath}/datetimer/js/jquery-ui-timepicker-zh-CN.js"></script>
	<script src="${contextPath}/bootstrap2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {
		$(".ui_timepicker").datetimepicker({
			//showOn : "button",
			//buttonImage : "${contextPath}/datetimer/css/images/icon_calendar.gif",
			//buttonImageOnly: true,
			showSecond : true,
			timeFormat : 'hh:mm:ss',
			stepHour : 1,
			stepMinute : 1,
			stepSecond : 1
		})
	})
</script>
<style type="text/css">
body {
	margin: 5px;
	font-size: 14px;
	padding: 0px;
	background-color: #A2A9B4;
}

.tips {
	color: #f00;
	font-size: 95%;
}

.col-center-block {
	float: none;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.number-search-input {
	padding-right: 15px;
	background: url("${contextPath}/images/search_icon.png") no-repeat
		scroll right center transparent;
}

.panel-padding-top {
	margin-top: 2px;
	border: 0px;
	background-color: #fff;
	border-radius: 4px;
}

.panel-padding-bottom {
	margin-bottom: 4px;
}

.td-padding-bottom {
	margin-bottom: 0px;
}

.td {
	vertical-align: middle !important;
	text-align: left;
	font-size: 14px;
	font-family: 'Microsoft YaHei';
}

._btn {
	background-color: #5BD2AA;
	border: 0px;
}

._btn:hover {
	background-color: #ADE9D5;
	border: 0px;
}

._btn:focus {
	background-color: #5BD2AA;
	border: 0px;
	outline: none;
}

._btn:active {
	background-color: #5BD2AA;
	border: 0px;
}

.btn-primary:active {
	background-color: #5BD2AA !important;
	border: 0px;
	box-shadow: 0px 0px 0px #5BD2AA;
}

.footer {
	text-align: center;
	vertical-align: middle;
}

.font {
	font-size: 14px;
	font-family: 'Microsoft YaHei';
	font-weight: bold;
}

.font1 {
	font-size: 14px;
	font-family: 'Microsoft YaHei';
	font-weight: normal;
}

.pagination {
	vertical-align: middle;
}

.pagination li a {
	cursor: pointer;
}
</style>
</head>
<body onload="javascript:onloadPage(0,0,0)">

	<div class="panel panel-primary panel-padding-top panel-padding-bottom">
		<div class="panel-body">
			<form class="form-inline">
				<div class="form-group">
					<label for="name" class="font">手机号&nbsp;</label> <input type="text"
						class="form-control number-search-input font1"
						id="phone_number" name="phone_number" placeholder="请输入号码">&nbsp;&nbsp;
					<label for="name" class="font">处理状态&nbsp;</label> <select
						id="sms_reply" class="form-control selectpicker font1">
						<option value="-1">所有</option>
						<option value="1">已处理</option>
						<option value="2">处理失败</option>
					</select>&nbsp; <input type="button" onclick="javascript:query()"
						class="btn btn-primary _btn font1" value="查找"> &nbsp; <input
						type="reset" class="btn btn-primary _btn font1" value="重置">
				</div>
			</form>
			<hr>
			<div>
				<button type="button" class="btn btn-primary _btn"
					data-toggle="modal" data-target="#addSMSModal">新增短信</button>
				<!-- <button class="btn btn-primary">批量刷新</button> -->
			</div>
		</div>
	</div>

	<!-- ADD -->
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="addSMSModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">新增短信</h4>
				</div>
				<div class="modal-body">
					<form id="addDeviceInfo" class="form-horizontal" role="form"
						method="post" action="${contextPath}/service/device/control.lt">
						<div class="form-group" id="group_phonenumber">
							<label for="lastname" class="col-sm-2 control-label"><span
								class="tips">*</span> 手机号码</label>
							<div class="col-sm-10">
								<input type="text" class="form-control" id="sms_phone_number"
									name="sms_phone_number" placeholder="请输入号码">
							</div>
						</div>

						<div class="form-group">
							<label for="lastname" class="col-sm-2 control-label">短信内容</label>
							<div class="col-sm-10">
								<textarea class="form-control" rows="5" id="sms_content"
									name="sms_content" placeholder="请输入短信内容"></textarea>
							</div>
						</div>
					</form>
					<div id="divmessage"></div>
				</div>
				<div class="modal-footer">
					<!-- <button type="button" class="btn btn-default" data-dismiss="modal"
						onclick="javascript:clearAddBox()">取消</button> -->
					<button id="btn_send" type="button"
						class="btn btn-primary " onclick="javascript:sendSMS()">确定</button>
				</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- ADD -->
	<div class="panel-padding-top td-padding-bottom">
		<div id="content"></div>
		<nav id="footer" class="footer"></nav>
	</div>

	<script type="text/javascript">
		var showLimit = 5;
		function onloadPage(no, size, max) {
			if (no <= 0)
				no = 1;
			if (max != 0 && no > max)
				no = max;
			var data = {
				page_no : no,
				page_size : size,
				phone_number : $("#phone_number").val(),
				reply : $("#sms_reply").val(),
				time1 : $("time1").val(),
				time2 : $("time2").val()
			};

			$.ajax({
				url : "${contextPath}/service/sms/listSMSLogPaging.lt",
				timeout : 30000,
				dataType : "json",
				data : data,
				type : "get",
				success : function(data) {
					showData(data);
				},
				error : function(req, msg, err) {
				}
			});
		}

		function query() {
			onloadPage(0, 0, 0);
		}

		function showData(data) {
			var html = "<table class='table table-hover table-condensed td'>"
					+ "<thead>" + "<tr class='font'>" + "<td>服务商</td>"
					+ "<td>短信内容</td>" + "<td>目标手机号</td>" + "<td>发送时间</td>"
					+ "<td>处理结果</td>" + "</tr>" + "</thead>" + "<tbody>";
			var result = eval(data);
			var response = result.list;

			for (i = 0; i < response.length; i++) {
				var entity = response[i];
				html += "<tr>" + "<td>" + entity.provider + "</td>" + "<td>"
						+ entity.content + "</td>" + "<td>" + entity.target
						+ "</td>" + "<td>"
						+ timeStamp2String(entity.create_date) + "</td>"
						+ "<td>" + replyShow(entity.reply) + "</td>" + "</tr>";
			}

			html += "</tbody>" + "</table>";
			$("#content").html(html);

			var footer_html = "";
			footer_html = "<ul class='pagination font1'>"
					+ "<li><a onclick=\"javascript:onloadPage("
					+ (result.pageNo % showLimit == 0 ? result.pageNo - 5
							: (parseInt(result.pageNo / showLimit)) * 5)
					+ ",0," + result.pagesSize + ")\">&laquo;</a></li>";

			//var index = ((parseInt(result.pageNo/showLimit)*5) == 0)?1:parseInt(result.pageNo/showLimit)*5;
			var index = (result.pageNo % 5 == 0) ? result.pageNo - 4
					: parseInt(result.pageNo / showLimit) * 5 + 1;
			var len = index + showLimit - 1 >= result.pagesSize ? result.pagesSize
					: index + showLimit - 1;
			//alert("index : " + index);
			for (; index <= len; index++) {
				footer_html += "<li><a onclick=javascript:onloadPage(" + index
						+ ",0," + result.pagesSize + ") >" + index
						+ "</a></li>";
			}

			footer_html += "<li><a onclick=\"javascript:onloadPage("
					+ (result.pageNo % showLimit == 0 ? result.pageNo + 1
							: (parseInt(result.pageNo / showLimit) + 1) * 5 + 1)
					+ ",0," + result.pagesSize + ")\">&raquo;</a></li>"
					+ "<li>&nbsp;&nbsp; 第" + result.pageNo + "页&nbsp; 共"
					+ result.pagesSize + "页 </li></ul>";
			$("#footer").html(footer_html);
		}

		function reset() {
			$("#device_no").val("");
			$("#device_time1_s").val("");
			$("#device_time2_s").val("");
			onloadPage(0, 0, 0);
		}
		
		function sendSMS(){
			var phonenumber = $("#sms_phone_number").val();
			var content = $("#sms_content").val();

			if (phonenumber.length < 13) {
				alertPopu("divmessage", "请输入13位手机号码!");
				$("#sms_phone_number").addClass("has-error");
				return;
			} else {
				$("#sms_phone_number").removeClass("has-error");
			}
			
			if (content.length <= 0) {
				alertPopu("divmessage", "请输短信内容!");
				$("#sms_content").addClass("has-error");
				return;
			} else {
				$("#sms_content").removeClass("has-error");
			}
			
			$("#btn_send").attr("data-dismiss", "modal");
			
			
			var data = {
					phonenumber : phonenumber,
					command : content
				};

			$.ajax({
				url : "${contextPath}/service/sms/sendMsg.lt",
				timeout : 30000,
				dataType : "json",
				type : "post",
				data : data,
				success : function(data) {
					//if (data == 200) {
						setTimeout(query, 500);
						//showBox("发送成功!");
					//} else {
					//	showBox("发送失败!");
					//}
				},
				error : function(req, msg, err) {
					//alert(msg);
					//alert(err);
				}
			});

		}
	</script>
</body>
</html>
